<template>
  <div>
    <el-dialog title="屏幕设置" :visible.sync="isShow">
      <div class="setting_box u-f">
        <!-- 设置 -->
        <div class="left u-f1" style="margin-right: 10px;">
          <h3 class="head font14 text_black">设置播放位置</h3>
          <div class="hear_tip font14 text_danger">屏幕宽高尺寸为：1080*1920像素。不填或填0则为不显示。</div>
          <div class="upload_box">
            <div class="u-f u-f-ac" style="margin-bottom: 15px;">
              <p class="lable font14 text_black">头部广告位：</p>
              <div class="ipt_box">
                <span class="font14 text_black">高</span>
                <el-input v-model="header" @change="headerInput"></el-input>
                <span class="font14 text_black">像素</span>
              </div>
            </div>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="headerList"
              :limit="1"
              :on-exceed="headerExceed"
              :on-success="headerSuccess"
              :on-remove="headerRemove"
              :on-error="headerError"
              list-type="picture">
              <el-button type="primary">上传图片</el-button>
            </el-upload>
          </div>

          <div class="upload_box">
            <div class="u-f u-f-ac" style="margin-bottom: 15px;">
              <p class="lable font14 text_black">中部广告位：</p>
              <div class="ipt_box">
                <span class="font14 text_black">高</span>
                <el-input v-model="center" @change="centerInput"></el-input>
                <span class="font14 text_black">像素</span>
              </div>
            </div>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="centerList"
              :limit="1"
              :on-exceed="centerExceed"
              :on-success="centerSuccess"
              :on-remove="centerRemove"
              :on-error="centerError"
              list-type="picture">
              <el-button type="primary">上传图片</el-button>
            </el-upload>
          </div>

          <div class="upload_box">
            <div class="u-f u-f-ac" style="margin-bottom: 15px;">
              <p class="lable font14 text_black">底部广告位：</p>
              <div class="ipt_box">
                <span class="font14 text_black">宽高：840*{{footer}}像素</span>
              </div>
            </div>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="footerList"
              :limit="1"
              :on-exceed="footerExceed"
              :on-success="footerSuccess"
              :on-remove="footerRemove"
              :on-error="footerError"
              list-type="picture">
              <el-button type="primary">上传图片</el-button>
            </el-upload>
          </div>

          <div class="txt_box u-f u-f-ac">
            <p class="lable font14 text_black">投放计划广告位：</p>
            <span class="font14 text_black">宽高：1080*{{plan}}像素,高度不能低于730像素</span>
          </div>

          <el-button class="submit" type="primary">提交</el-button>


        </div>
        <!-- 预览图 -->
        <div class="right u-f1" style="margin-left: 10px;">
          <h3 class="head font14 text_black">效果预览图</h3>
          <div class="previcw_box">
            <div :style="{height: (header / 3) + 'px'}" v-if="header">
              <img class="img" :src="headerDefaultImg">
            </div>
            <div :style="{height: (plan / 3) + 'px'}" v-if="plan">
              <img class="img" src="../../assets/img/plan_zhan.png">
            </div>
            <div :style="{height: (center / 3) + 'px'}" v-if="center">
              <img class="img" :src="centerDefaultImg" >
            </div>
            <div class="footer u-f">
              <img class="qrcode" src="../../assets/img/qrcode.png" >
              <img class="image" :src="footerDefaultImg" >
            </div>
          </div>
        </div>
        <!--  -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'screenSet',
  data() {
    return {
      isShow: false,
      height: 1920,
      header: '',
      headerDefaultImg: require('../../assets/img/header_zhan.png'),
      headerList: [],
      center: '',
      centerDefaultImg: require('../../assets/img/center_zhan.png'),
      centerList: [],
      footer: 190,
      footerDefaultImg: require('../../assets/img/footer_zhan.png'),
      footerList: [],
    }
  },
  computed: {
    plan() {
      let res = this.height - this.header - this.center - this.footer
      res = res > 730 ? res : 730
      return res
    },
  },
  methods: {
    show() {
      this.isShow = true;
      this.getData();
    },
    getData() {
      console.log("请求数据");
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleSearch() {},
    handleChange() {
      this.isShow = false;
      this.$emit('hide')
    },
    headerInput(val) {
      let max = this.height - 730 - this.center - this.footer
      if(val > max) {
        this.$message('不能大于' + max + '像素');
        this.header = ''
      }
    },
    headerSuccess(response, file) {
      this.headerList[0] = file
      this.headerDefaultImg = file.url
    },
    headerRemove() {
      this.headerList = []
      this.headerDefaultImg = require('../../assets/img/header_zhan.png')
    },
    headerError(err, file, fileList) {},
    headerExceed(files, fileList) {
      this.$message('只能上传一张');
    },
    centerInput(val) {
      let max = this.height - 730 - this.header - this.footer
      if(val > max) {
        this.$message('不能大于' + max + '像素');
        this.center = ''
      }
    },
    centerSuccess(response, file) {
      this.centerList[0] = file
      this.centerDefaultImg = file.url
    },
    centerRemove() {
      this.centerList = []
      this.centerDefaultImg = require('../../assets/img/center_zhan.png')
    },
    centerError(err, file, fileList) {},
    centerExceed(files, fileList) {
      this.$message('只能上传一张');
    },
    footerSuccess(response, file) {
      this.footerList[0] = file
      this.footerDefaultImg = file.url
    },
    footerRemove() {
      this.footerList = []
      this.footerDefaultImg = require('../../assets/img/footer_zhan.png')
    },
    footerError(err, file, fileList) {},
    footerExceed(files, fileList) {
      this.$message('只能上传一张');
    },
  }
}
</script>

<style scoped>
.setting_box{
  margin-top: -20px;
}
.setting_box .head{
  border-left: 4px solid #409EFF;
  padding-left: 10px;
}
.hear_tip{
  margin-bottom: 20px;
}
.upload_box {
  margin-bottom: 20px;
}
.upload_box .lable {
  width: 120px;
  margin: 0;
}
.upload_box .el-input {
  width: 120px;
  margin: 0 10px;
}
.txt_box .lable {
  width: 120px;
  margin: 0;
}
.submit{
  margin-top: 40px;
}
.previcw_box{
  width: 360px;
  height: 640px;
  border: 1px solid #dddddd;
}
.previcw_box .img{
  width: 100%;
  height: 100%;
}
.footer{
  height: 63px;
}
.previcw_box .qrcode{
  width: 63px;
  height: 63px;
  margin-right: 17px;
}
.previcw_box .image{
  width: 280px;
  height: 63px;
}
</style>